
<template name="skeleton">
  <view class="sk-container ca-sk" style="background-color:#fff;">
    <view class="category-container category-container">
      <view class="category-list category-list">
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-688 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-505 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-122 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-622 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-839 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-777 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-874 sk-text">哺乳动物</text>
        </view>
        <view class="category-item category-item">
          <image class="category-img active-img sk-image" mode="aspectFill"></image>
          <text class="category-name sk-transparent sk-text-14-2857-992 sk-text">哺乳动物</text>
        </view>
      </view>
      <view is="node-modules/@dcloudio/uni-ui/lib/uni-transition/uni-transition" class="mask mask"></view>
      <view canvas-id="categoryColorCanvas" id="categoryColorCanvas" style="position:absolute;transform:translateY(-100%);top:0" class="sk-transparent sk-text-14-2857-472 sk-text sk-image">绘图区域</view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.sk-transparent {
  color: transparent !important;
}
.ca-sk{
  background-color: #fff!important;
}
.sk-text-14-2857-688 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-14-2857-505 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-122 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-622 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-839 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-777 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-874 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-992 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: relative !important;
}
.sk-text-14-2857-472 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 43.0769rpx;
  position: absolute !important;
}
.sk-image {
  background: #EFEFEF !important;
}
.sk-pseudo::before, .sk-pseudo::after {
  background: #EFEFEF !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff!important;
}

</style>